<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
<input type="button" value="发起异步的get请求_入门" id="btn1"> <br>
<input type="button" value="发起异步的get请求_演化" id="btn2"> <br>
<input type="button" value="发起异步的post请求" id="btn3"> <br>

</body>
<!--
    1. 引入axios核心js文件 (ajax请求库)
    2. 调用axios对象的方法来发起异步请求
    3. 调用axios对象的方法来处理响应的数据
-->
<script src="js/axios-0.18.0.js"></script>
<script>
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function () {

        let url = "/MyServlet";
        let param = "name=zs&age=18"

        //在js中,function也是一种变量类型
        let t = function (response) {
            console.log(response);
            console.log(response.data);
        }
        /*
            1. axios对象的get函数发起一个异步的get请求
                参数: 请求地址?参数
            2. then函数是用来接收响应数据
                参数: 函数fn
                1). fn有一个变量response , 此变量表示的就是服务端的响应数据
                2). response.data 是 响应体
         */
        axios.get(url + "?" + param).then(t)
    }
</script>
<script>
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function () {
        let url = "/MyServlet"
        let param = "name=ls&age=19"
        // let t = function (response){
        //     console.log(response.data);
        // }

        //箭头函数 (相当于java中的lambda表达式)
        // let t = response => {
        //     console.log(response.data);
        // }

        // axios.get(url + "?" + param).then(response => {
        //     console.log(response.data);
        // })

        /**
         *  get : 发起异步的get请求  (必须要!!!)
         *  then : 响应成功回调的函数 (必须要!!!)
         *  catch : 响应异常回调的函数
         *  finally : 无论如何,最终都会回调的函数
         */
        axios.get(url + "?" + param).then(response => {
            console.log(response.data);
        }).catch(error => {
            //error表示错误信息
            console.log(error);
        }).finally(() => {
            console.log("无论如何都会调用的函数");
        })
    }
</script>

<script>
    var btn3 = document.getElementById("btn3");
    btn3.onclick = function () {
        let url = "/MyServlet"
        let param = "name=ww&age=20"

        axios.post(url, param).then(response => {
            console.log(response.data);
        })
    }
</script>

</html>